<template>
  <div class="admin-container">
    <!-- 顶部导航 -->
    <el-header class="header">
      <div class="header-left">
        <h1>管理员控制台</h1>
      </div>
      <div class="header-right">
        <span>欢迎, {{ user?.name }}</span>
        <el-button type="primary" plain @click="handleLogout">退出登录</el-button>
      </div>
    </el-header>

    <!-- 主要内容 -->
    <el-main>
      <!-- 添加数据表单 -->
      <el-card class="add-form-card">
        <template #header>
          <div class="card-header">
            <span>商品信息管理系统</span>
          </div>
        </template>
        
        <el-form 
          ref="formRef" 
          :model="form" 
          :rules="rules" 
          label-width="100px" 
          size="default"
        >
          <el-form-item label="商品名称" prop="product_name">
            <el-input v-model="form.product_name" placeholder="请输入商品名称" />
          </el-form-item>
          
          <el-form-item label="商品类别" prop="category">
            <el-select v-model="form.category" placeholder="请选择商品类别">
              <el-option 
                v-for="cat in existingCategories" 
                :key="cat" 
                :label="cat" 
                :value="cat" 
              />
            </el-select>
          </el-form-item>
          
          <el-form-item label="价格(元)" prop="price">
            <el-input-number v-model="form.price" :min="0.01" :precision="2" :step="0.1" />
          </el-form-item>
          
          <el-form-item label="库存量(件)" prop="stock">
            <el-input-number v-model="form.stock" :min="0" :step="1" />
          </el-form-item>
          
          <el-form-item label="销量(件)" prop="sales">
            <el-input-number v-model="form.sales" :min="0" :step="1" />
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="submitForm" :loading="submitting">
              添加商品
            </el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 新添加的商品筛选和统计区域 -->
      <el-row :gutter="20" class="control-stats-row">
        <!-- 左侧：商品筛选卡片 -->
        <el-col :span="12">
          <el-card class="control-card modern-card" shadow="hover">
            <template #header>
              <div class="section-header">
                <div class="section-title">
                  <el-icon class="section-icon"><Search /></el-icon>
                  <span>商品筛选</span>
                </div>
              </div>
            </template>
            <div class="control-form">
              <div class="form-item">
                <label class="form-label">商品名称</label>
                <el-input 
                  v-model="searchForm.product_name"
                  placeholder="输入商品名称"
                  clearable 
                  class="full-width"
                />
              </div>
              <div class="form-item">
                <label class="form-label">商品类别</label>
                <el-select 
                  v-model="searchForm.category"
                  placeholder="选择商品类别"
                  clearable 
                  class="full-width"
                >
                  <el-option 
                    v-for="cat in categories"
                    :key="cat"
                    :label="cat"
                    :value="cat"
                  />
                </el-select>
              </div>
              <div class="form-item">
                <label class="form-label">价格范围</label>
                <el-input 
                  v-model="searchForm.min_price"
                  placeholder="最低价"
                  clearable 
                  class="half-width"
                  type="number"
                />
                <span class="price-range-separator">-</span>
                <el-input 
                  v-model="searchForm.max_price"
                  placeholder="最高价"
                  clearable 
                  class="half-width"
                  type="number"
                />
              </div>
              <div class="form-item">
                <div class="button-group">
                  <el-button type="primary" @click="handleSearch" class="action-btn search-btn">
                    <el-icon><Search /></el-icon>
                    搜索
                  </el-button>
                  <el-button @click="resetSearch" class="action-btn reset-btn">
                    <el-icon><RefreshLeft /></el-icon>
                    重置
                  </el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <!-- 右侧：商品统计卡片 -->
        <el-col :span="12">
          <el-card class="stats-card modern-card" shadow="hover" v-loading="statsLoading">
            <template #header>
              <div class="section-title">
                <el-icon class="section-icon"><Document /></el-icon>
                <span>商品统计</span>
              </div>
            </template>
            <div class="stats-content">
              <div class="stat-item">
                <div class="stat-number">{{ totalProducts }}</div>
                <div class="stat-label">总商品数</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">{{ categories.length }}</div>
                <div class="stat-label">商品类别数</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">¥{{ averagePrice }}</div>
                <div class="stat-label">平均价格</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">{{ totalSales }}</div>
                <div class="stat-label">总销量</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 图表区域 -->
      <el-row :gutter="20" class="charts-row">
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>商品类别分布</span>
              </div>
            </template>
            <div class="chart-container">
              <!-- 确保有ref绑定 -->
              <div ref="pieChart" style="width: 100%; height: 300px;"></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>商品价格分布</span>
              </div>
            </template>
            <div class="chart-container">
              <!-- 确保有ref绑定 -->
              <div ref="barChart" style="width: 100%; height: 300px;"></div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 修改：将"热门商品"改为"商品数据列表" -->
      <el-card class="recent-data-card">
        <template #header>
          <div class="card-header">
            <span>商品数据列表</span>
          </div>
        </template>
        
        <el-table 
          :data="products" 
          border 
          stripe 
          style="width: 100%" 
          v-loading="loading" 
          element-loading-text="正在加载数据..." 
          element-loading-spinner="el-icon-loading" 
          element-loading-background="rgba(0, 0, 0, 0.1)" 
          :header-cell-style="{
            background: '#f8f9fa', 
            color: '#606266', 
            fontWeight: 'bold', 
            borderColor: '#e4e7ed' 
          }" 
          :row-style="{ height: '60px' }"
        >
          <el-table-column prop="product_name" label="商品名称" width="180" sortable align="center">
            <template #default="{ row }">
              <div class="product-cell">
                <el-icon class="product-icon"><Goods /></el-icon>
                <span>{{ row.product_name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="category" label="类别" width="120" align="center">
            <template #default="{ row }">
              <el-tag type="info" size="large" class="category-tag">
                <el-icon><PriceTag /></el-icon>
                {{ row.category }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格(元)" width="120" sortable align="center">
            <template #default="{ row }">
              <el-tag 
                type="success" 
                size="large" 
                class="price-tag"
              >
                ¥{{ row.price }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="stock" label="库存量(件)" width="120" align="center">
            <template #default="{ row }">
              <div class="metric-cell">
                <el-icon class="metric-icon"><Box /></el-icon>
                <span>{{ row.stock }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sales" label="销量(件)" width="120" align="center">
            <template #default="{ row }">
              <div class="metric-cell">
                <el-icon class="metric-icon"><Sell /></el-icon>
                <span>{{ row.sales }}</span>
              </div>
            </template>
          </el-table-column>
          <!-- 保留删除功能 -->
          <el-table-column label="操作" width="160">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="openEditDialog(row)">
                编辑
              </el-button>
              <el-button type="danger" size="small" @click="deleteRecord(row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 添加编辑对话框 -->
        <el-dialog
          v-model="editDialogVisible"
          class="edit-dialog"
          title="编辑商品信息"
          width="50%"
          :close-on-click-modal="false"
        >
          <el-form
            ref="editFormRef"
            :model="editForm"
            :rules="rules"
            label-width="100px"
          >
            <el-form-item label="商品名称" prop="product_name">
              <el-input v-model="editForm.product_name" placeholder="请输入商品名称" />
            </el-form-item>
            
            <el-form-item label="商品类别" prop="category">
              <el-select v-model="editForm.category" placeholder="请选择商品类别">
                <el-option
                  v-for="cat in existingCategories"
                  :key="cat"
                  :label="cat"
                  :value="cat"
                />
              </el-select>
            </el-form-item>
            
            <el-form-item label="价格(元)" prop="price">
              <el-input-number v-model="editForm.price" :min="0.01" :precision="2" />
            </el-form-item>
            
            <el-form-item label="库存量(件)" prop="stock">
              <el-input-number v-model="editForm.stock" :min="0" />
            </el-form-item>
            
            <el-form-item label="销量(件)" prop="sales">
              <el-input-number v-model="editForm.sales" :min="0" />
            </el-form-item>
          </el-form>
          
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="editDialogVisible = false">取消</el-button>
              <el-button
                type="primary"
                @click="submitEdit"
                :loading="editing"
              >
                确认修改
              </el-button>
            </span>
          </template>
        </el-dialog>

        <!-- 添加分页功能 -->
        <div class="pagination-wrapper">
          <el-pagination 
            v-model:current-page="currentPage" 
            v-model:page-size="pageSize" 
            :page-sizes="[5, 10, 15, 20]" 
            :total="total" 
            layout="total, sizes, prev, pager, next, jumper" 
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange" 
            background
          />
        </div>
      </el-card>
    </el-main>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  DataAnalysis,
  Location,
  Coin,
  Sell,
  Search,
  RefreshLeft,
  Document,
  Goods,
  PriceTag,
  Box
} from '@element-plus/icons-vue'
import { user, logout } from '@/stores/auth'
import {
  products,
  categories,
  stats,
  statsLoading,
  loading,
  pagination,
  addProduct,
  deleteProduct,
  fetchStats,
  initProductData,
  fetchCategories,
  setFilters,
  clearFilters,
  fetchProducts,
  setPagination,
  updateProduct
} from '@/stores/product'

import * as echarts from 'echarts'

const pieChart = ref(null)
const barChart = ref(null)
// 1. 添加图表实例引用
const pieChartInstance = ref(null)
const barChartInstance = ref(null)

// 分页相关状态 
const currentPage = computed({
  get: () => pagination.value.page,
  set: (val) => setPagination(val)
})
const pageSize = computed({
  get: () => pagination.value.page_size,
  set: (val) => setPagination(pagination.value.page, val)
})
const total = computed(() => pagination.value.total)

// 分页处理 
const handleSizeChange = async (val) => {
  setPagination(1, val)
  await fetchProducts()
}

const handleCurrentChange = async (val) => {
  setPagination(val)
  await fetchProducts()
}

// 新增 filters 响应式对象
const filters = ref({})

// 替换现有的searchForm定义 
const searchForm = reactive({ 
  product_name: '', 
  category: '', 
  min_price: '', 
  max_price: '' 
}) 

// 添加watch来同步到filters 
watch(() => ({ ...searchForm }), (newVal) => { 
  setFilters(newVal) 
}, { deep: true }) 

// 初始化时从filters恢复值 
onMounted(() => { 
  if (filters.value) { 
    searchForm.product_name = filters.value.product_name || '' 
    searchForm.category = filters.value.category || '' 
    searchForm.min_price = filters.value.min_price || '' 
    searchForm.max_price = filters.value.max_price || '' 
  } 
}) 

// 修改handleSearch和resetSearch方法 
const handleSearch = async () => { 
  await setPagination(1) 
  await Promise.all([fetchProducts(), fetchStats()]) 
  ElMessage.success('筛选条件已应用') 
} 

const resetSearch = async () => { 
  Object.assign(searchForm, { 
    product_name: '', 
    category: '', 
    min_price: '', 
    max_price: '' 
  }) 
  await clearFilters() 
  await setPagination(1) 
  await Promise.all([fetchProducts(), fetchStats()]) 
  ElMessage.info('筛选条件已重置') 
}

// 2. 修改初始化方法
const initCharts = () => {
  if (!pieChart.value || !barChart.value) return
  
  // 销毁现有实例
  pieChartInstance.value?.dispose()
  barChartInstance.value?.dispose()
  
  // 创建新实例
  pieChartInstance.value = echarts.init(pieChart.value)
  barChartInstance.value = echarts.init(barChart.value)
  
  updateCharts()
}

// 3. 添加图表更新方法
const updateCharts = () => {
  if (!pieChartInstance.value || !barChartInstance.value) return
  
  // 饼图配置
  const pieOption = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      data: stats.value.category_distribution?.map(item => item.name) || []
    },
    series: [{
      name: '商品类别',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '18',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: stats.value.category_distribution || []
    }]
  }
  
  // 柱状图配置
  const barOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: stats.value.price_distribution?.map(item => item.range) || [],
      axisLabel: {
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      name: '商品数量'
    },
    series: [{
      name: '价格区间商品数',
      type: 'bar',
      data: stats.value.price_distribution?.map(item => item.count) || [],
      itemStyle: {
        color: function(params) {
          const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
          return colorList[params.dataIndex % colorList.length]
        }
      }
    }]
  }
  
  pieChartInstance.value.setOption(pieOption)
  barChartInstance.value.setOption(barOption)
}

const router = useRouter()
const formRef = ref()
const submitting = ref(false)

// 表单数据
const form = reactive({
  product_name: '',
  category: '',
  price: null,
  stock: null,
  sales: null
})

// 验证规则
const rules = {
  product_name: [
    { required: true, message: '请输入商品名称', trigger: 'blur' }
  ],
  category: [
    { required: true, message: '请选择商品类别', trigger: 'change' }
  ],
  price: [
    { required: true, message: '请输入价格', trigger: 'blur' },
    { type: 'number', min: 0.01, message: '价格必须大于0', trigger: 'blur' }
  ],
  stock: [
    { required: true, message: '请输入库存量', trigger: 'blur' },
    { type: 'number', min: 0, message: '库存量不能为负数', trigger: 'blur' }
  ],
  sales: [
    { required: true, message: '请输入销量', trigger: 'blur' },
    { type: 'number', min: 0, message: '销量不能为负数', trigger: 'blur' }
  ]
}

// 现有商品类别
const existingCategories = computed(() => categories.value)

// 统计数据
const totalProducts = computed(() => stats.value.total_products || 0)
const totalCategories = computed(() => stats.value.total_categories || 0)
const averagePrice = computed(() => stats.value.average_price?.toFixed(2) || '0.00')
const totalSales = computed(() => stats.value.total_sales || 0)
const topSelling = computed(() => stats.value.top_selling || [])

// 提交表单
const submitForm = async () => {
  try {
    await formRef.value.validate()
    submitting.value = true
    
    // 调用API添加数据
    await addProduct(form)
    
    // 刷新统计信息
    await fetchStats()
    
    resetForm()
  } catch (error) {
    console.error('添加商品失败:', error)
  } finally {
    submitting.value = false
  }
}

// 重置表单
const resetForm = () => {
  formRef.value.resetFields()
  Object.assign(form, {
    product_name: '',
    category: '',
    price: null,
    stock: null,
    sales: null
  })
}

// 删除记录
const deleteRecord = async (id) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这条商品记录吗？',
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const success = await deleteProduct(id)
    if (success) {
      // 刷新商品列表和统计信息
      await Promise.all([
        fetchProducts(),
        fetchStats()
      ])
    }
  } catch (error) {
    ElMessage.info('已取消删除')
  }
}

// 查看全部数据
const viewAllData = () => {
  router.push('/dashboard')
}

// 退出登录
const handleLogout = () => {
  logout()
  router.push('/login')
  ElMessage.success('已退出登录')
}

// 4. 修改数据获取逻辑
onMounted(async () => {
  // 初始化商品数据
  await initProductData()
  
  // 获取必要数据
  await Promise.all([
    fetchCategories(),
    fetchStats(),
    fetchProducts()
  ])
  
  // 直接初始化图表
  initCharts()
})

// 5. 修改stats的watch
watch(stats, () => {
  updateCharts()
}, { deep: true })

// 6. 添加窗口resize监听
onMounted(() => {
  window.addEventListener('resize', () => {
    pieChartInstance.value?.resize()
    barChartInstance.value?.resize()
  })
})

// 添加编辑相关状态
const editDialogVisible = ref(false)
const editing = ref(false)
const editFormRef = ref(null)
const editForm = reactive({
  id: null,
  product_name: '',
  category: '',
  price: null,
  stock: null,
  sales: null
})

// 打开编辑对话框
const openEditDialog = (row) => {
  Object.assign(editForm, {
    id: row.id,
    product_name: row.product_name,
    category: row.category,
    price: row.price,
    stock: row.stock,
    sales: row.sales
  })
  editDialogVisible.value = true
}

// 提交编辑
const submitEdit = async () => {
  try {
    await editFormRef.value.validate()
    editing.value = true
    
    // 调用更新方法
    await updateProduct(editForm.id, {
      product_name: editForm.product_name,
      category: editForm.category,
      price: editForm.price,
      stock: editForm.stock,
      sales: editForm.sales
    })
    
    // 刷新列表和统计信息
    await Promise.all([
      fetchProducts(),
      fetchStats()
    ])
    
    editDialogVisible.value = false
    ElMessage.success('商品更新成功')
  } catch (error) {
    console.error('更新商品失败:', error)
    ElMessage.error('商品更新失败')
  } finally {
    editing.value = false
  }
}

// 7. 添加组件卸载时的清理
onUnmounted(() => {
  pieChartInstance.value?.dispose()
  barChartInstance.value?.dispose()
  window.removeEventListener('resize', () => {})
})
</script>

<style scoped>
.admin-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #409eff;
  color: white;
}

/* 添加图表样式 */
.charts-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 100%;
}

.chart-container {
  width: 100%;
  height: 300px;
}

@media (max-width: 992px) {
  .charts-row .el-col {
    margin-bottom: 20px;
  }
  
  .charts-row .el-col:last-child {
    margin-bottom: 0;
  }
}

/* 其他现有样式保持不变 */
.add-form-card {
  margin-bottom: 20px;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  position: relative;
  height: 120px;
}

.stat-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.stat-icon {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 40px;
  opacity: 0.2;
}

.recent-data-card {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 新增样式 */
.control-stats-row {
  margin-bottom: 20px;
}

.modern-card {
  border-radius: 16px;
  border: none;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.modern-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.section-icon {
  font-size: 20px;
  color: #409eff;
}

.control-form {
  padding: 0;
}

.form-item {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  color: #606266;
  font-weight: 500;
  font-size: 14px;
}

.full-width {
  width: 100%;
}

.half-width {
  width: 48%;
}

.price-range-separator {
  display: inline-block;
  width: 4%;
  text-align: center;
}

.button-group {
  display: flex;
  gap: 12px;
  flex-direction: row;
}

.stats-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
}

.stat-item {
  flex: 0 0 50%;
  margin-bottom: 16px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #909399;
}

.action-btn {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  flex: 1;
  padding: 12px 20px;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.search-btn {
  background: linear-gradient(135deg, #409eff, #66b1ff);
  border: none;
  color: white;
}

.search-btn:hover {
  background: linear-gradient(135deg, #66b1ff, #409eff);
}

.reset-btn {
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  color: #606266;
}

.reset-btn:hover {
  background: #ecf5ff;
  border-color: #409eff;
  color: #409eff;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .control-stats-row .el-col {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .control-stats-row .el-col:last-child {
    margin-bottom: 0;
  }
}

.product-cell,
.metric-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.product-icon,
.metric-icon {
  color: #909399;
}

.category-tag,
.price-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 16px;
  padding: 6px 12px;
  font-weight: bold;
}

.pagination-wrapper {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}
/* 添加筛选和统计区域样式 */
.control-stats-row {
  margin-bottom: 20px;
}

.modern-card {
  border-radius: 16px;
  border: none;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.modern-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.section-icon {
  font-size: 20px;
  color: #409eff;
}

.control-form {
  padding: 0;
}

.form-item {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  color: #606266;
  font-weight: 500;
  font-size: 14px;
}

.full-width {
  width: 100%;
}

.half-width {
  width: 48%;
}

.price-range-separator {
  display: inline-block;
  width: 4%;
  text-align: center;
}

.button-group {
  display: flex;
  gap: 12px;
  flex-direction: row;
}

.stats-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
}

.stat-item {
  flex: 0 0 50%;
  margin-bottom: 16px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #909399;
}

.action-btn {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  flex: 1;
  padding: 12px 20px;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.search-btn {
  background: linear-gradient(135deg, #409eff, #66b1ff);
  border: none;
  color: white;
}

.search-btn:hover {
  background: linear-gradient(135deg, #66b1ff, #409eff);
}

.reset-btn {
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  color: #606266;
}

.reset-btn:hover {
  background: #ecf5ff;
  border-color: #409eff;
  color: #409eff;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .control-stats-row .el-col {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .control-stats-row .el-col:last-child {
    margin-bottom: 0;
  }
}

/* 添加对话框样式 */
.edit-dialog .el-dialog {
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.edit-dialog .el-dialog__header {
  border-bottom: 1px solid #eee;
  padding: 20px;
}

.edit-dialog .el-dialog__body {
  padding: 20px 25px;
}

.edit-dialog .el-dialog__footer {
  border-top: 1px solid #eee;
  padding: 15px 20px;  
}
</style>